<template>
  <div>
    <material  @insertImage="insertImage($event)" ref="material"></material>
    <el-button @click="backNewsPage">返回新闻页面</el-button>
    <el-card v-loading="loading" style="margin:30px">
      <el-row :gutter="10">
        <el-col :span="3">
          <span class="head-text">请输入作者：</span>
        </el-col>
        <el-col :span="8">
          <el-input v-model="detailData.author" type="text" placeholder="请输入作者"></el-input>
        </el-col>
        <el-col :span="6">
          <span class="head-text">请输入文章标题：</span>
        </el-col>
        <el-col :span="6">
          <el-input v-model="detailData.title" placeholder="请输入文章标题"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <span class="head-text">摘要：</span>
        </el-col>
        <el-col :span="20">
          <el-input rows="3" v-model="detailData.desc" type="textarea"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <span class="head-text">封面图片：</span>
        </el-col>
        <el-col :span="3">
          <el-button @click="showMaterial(true)" type="primary">选择素材</el-button>
        </el-col>
        <el-col :span="3">
          <img class="coverImg" :src="detailData.cover" />
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <span class="head-text">显示文章</span>
        </el-col>
        <el-col :span="4">
          <el-switch style="margin-top:10px" />
        </el-col>
        <el-col :span="4">
          <span class="head-text">是否最热</span>
        </el-col>
        <el-col :span="3">
          <el-switch v-model="detailData.hot" style="margin-top:10px" />
        </el-col>
        <el-col :span="4">
          <span class="head-text">文章显示封面</span>
        </el-col>
        <el-col :span="3">
          <el-switch style="margin-top:10px" />
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <span class="head-text">外联</span>
        </el-col>
        <el-col :span="4">
          <el-switch style="margin-top:10px" />
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <span class="head-text">切换富文本类型</span>
        </el-col>
        <el-col :span="2"  >
          <el-radio v-model="detailData.type" @change='changeEdit()' style="margin-top:12px" label="1">富文本</el-radio>
        </el-col>
        <el-col :span="2" >
          <el-radio v-model="detailData.type" @change='changeEdit()' style="margin-top:12px" label="0">markdown</el-radio>
        </el-col>
        <el-col :span="7">
          <span style="color:red;font-size:12px" class="head-text">切换编辑器会清空内容请谨慎操作</span>
        </el-col>
        <el-col :span="8">
          <el-button class="imageInsert" @click="showMaterial()">插入素材</el-button>
        </el-col>
        <el-col style="margin:20px 0px">
          <!-- 富文本编辑器 -->
        <!-- 富文本和markdown -->
          <Tinymce v-show="detailData.type=='1'" :value="detailData.content1?detailData.content1:'请输入内容'" ref="Tinymce"></Tinymce>
          <markdown  ref="markdown" v-show="detailData.type=='0'"></markdown>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button style="float:right" @click="getTinymceText" type="primary">提 交 数 据</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 确认切换编辑器时的警告弹窗 -->
    <el-dialog title="提示" :visible.sync="editFlag" width="30%" center>
      <div style='text-align:center'>切换编辑器将会清除您已经输入的内容，确定切换？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEditChange">取 消</el-button>
        <el-button type="primary" @click="editChange()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import news from "@/api/newsManager/news";
import material from "@/views/Manager/newsManager/component/material.vue";
import Tinymce from "@/components/Tinymce";
import markdown from "@/components/MarkdownEditor";
import setting from "@/settings";
export default {
  components: {
    material,
    Tinymce,
    markdown
  },
  data() {
    return {
      // 弹窗必须先卸载，然后重新被创建才能触发一系列钩子函数
      host: setting.host,
      // 源数据，对于没有set和get的属性，就算数据发生变化，也不会更新视图
      detailData: {
        cover: "",
        hot: true,
        type: "1"
      },
      type: "1",
      //   加载动画
      loading: false,
      //用这个判断将返回过来的图片插入到什么位置
      coerImgFlag: false,
      // 切换编辑器时的确认弹窗
      editFlag: false
    };
  },
  methods: {
    // 确认切换编辑器
    // 切换编辑器相关操作
    changeEdit(){
      this.editFlag=true
    },
    cancelEditChange(){
        this.detailData.type=="1"?this.detailData.type='0':this.detailData.type='1'
        console.log(this.detailData.type)
        this.editFlag=false
    },
    editChange(){
      this.editFlag = false;
       // 不多说了
       this.$nextTick(() => {
        // 两个方法，一个setHtml一个setValue，另外相对的get方法，它们的意思很明显，分别代表markdown两边的输入和输出框
        // this.$refs.markdown.setHtml('1111111111')
        this.$refs.markdown.setValue("");
        this.$refs.Tinymce.setContent("");
      });
    },
    // 直接插入到文章内部就完事了
    // 复制什么复制
    //调用这个方法，将其返回过来的内容插入进富文本中
    // coerImgFlag这个变量决定了对从子组件里返回的item做什么操作
    // coerImgFlag为true的时候它是向封面图插入图片
    // 否则它是向正文插入图片
    insertImage(item) {
      if (this.coerImgFlag) {
        this.detailData.cover = `${this.host}/${item.dir}/${item.fileName}`;
        this.coerImgFlag = item.coerImgFlag;
        return;
      }
      // 否则执行插入文章方法
      var temp = [];
      temp[0] = item;
      // 调用 已经包装好的，关于Tinymce富文本 的方法，
      // 将需要的内容插入到文本编辑器中
      // 作者写的已经被我做了一些修改，但是问题不大，修改了一些数值，没有修改代码结构
      this.$refs.Tinymce.imageSuccessCBK(temp);
    },
    //获取富文本信息，之后直接提交，
    getTinymceText() {
      var temp = "";
      var tempdata = this.detailData;

      tempdata.content1 = this.$refs.Tinymce.getContent();
      tempdata.content2 = this.$refs.Tinymce.getContent();
      tempdata.hot ? (this.detailData.hot = "1") : (this.detailData.hot = "0");

      if (!tempdata.title) {
        temp = "请输入标题";
      } else if (!tempdata.author) {
        temp = "请输入作者姓名";
        tempdata.content1 = this.$refs.Tinymce.getContent();
        tempdata.content2 = this.$refs.Tinymce.getContent();
        tempdata.hot
          ? (this.detailData.hot = "1")
          : (this.detailData.hot = "0");
      } else if (!tempdata.cover) {
        temp = "请选择封边图片";
      } else if (!tempdata.content1) {
        temp = "请输入文章内容";
      }
      if (temp) {
        this.$message({
          message: temp,
          type: "error"
        });
        return;
      }
      // 如果是富文本的话
      // 还要加个markdown
      // 需要对其做兼容,不弄了，神经病
      // 弄吧弄吧，淦

      // 对数据做包装

      //radio能不能无中生不是很清楚
      var api = "";
      if (tempdata.id) {
        api = news.newsUpdate;
      } else {
        api = news.addnews;
      }
      this.loading = true;
      api({
        xyNews: tempdata
      })
        .then(res => {
          this.detailData = this.$options.data().detailData;
          this.loading = false;
          this.$message({
            message: "文章上传成功，请等待审核",
            type: "success"
          });
        })
        .catch(res => {
          this.loading = false;
          this.$message({
            message: "文章上传失败，请检查网络",
            type: "error"
          });
        });
    },
    setTinymceText(val) {
      // this.$refs.Tinymce.setContent('<p>111111111</p>')
    },
    // 让材料选择框显示
    // 然后点击插入后可以插入图片到你想要的位置
    // 具体插入到哪里看这个方法insertImage
    showMaterial(flag) {
      this.$refs.material.isshowing = true;
      if (flag) {
        this.coerImgFlag = true;
      }
    },
    backNewsPage() {
      this.$router.push({ path: "/newsManager/news" });
    }
  },
  created() {
    // 如果有id那么获取详细信息
    if (this.$route.query.id) {
      this.loading = true;
      news
        .newsDetail({
          id: this.$route.query.id
        })
        .then(res => {
          this.detailData = res.data.data;
          this.loading = false;
        })
        .catch(res => {
          this.loading = false;
          this.$message({
            message: "网络有误，请稍后重试",
            type: "error"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin: 20px 0px 20px 0;
}
.el-col {
  overflow: hidden;
}
.imageInsert {
  float: right;
}
.head-text {
  float: right;
  line-height: 40px;
  display: block;
  height: 40px;
}
.coverImg {
  width: 100px;
  height: 100px;
}
</style>